
<template>
  <avue-crud ref="crud"
             :option="option"
             :data="data"
             @row-update="addUpdate"
             @row-save="rowSave"
             @row-click="handleRowClick">
    <template #age="{row}">
      <el-tag>{{row.age}}</el-tag>
    </template>
    <template #age-form="{row,disabled}">
      自定义:<el-input v-model="row.age"
                :disabled="disabled"></el-input>
    </template>
    <span>

    </span>
    <template #name-form="{row}">
      <el-input v-model="row.name"
                :disabled="row.$index==2"></el-input>
    </template>
    <template #menu-left="{}">
      <el-button @click="addRow">添加10条</el-button>
    </template>
    <template #menu="{row,index,size}">
      <el-button @click="addBreakRow(row,index)"
                 :size="size"
                 type="primary"
                 text>向上添加</el-button>
      <el-button @click="addNextRow(row,index)"
                 :size="size"
                 type="primary"
                 text>向下添加</el-button>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [{
        id: 0,
        sex: 1,
        age: 18,
        $cellEdit: true
      }, {
        id: 1,
        name: '李四',
        age: 18,
        sex: 0,
      }, {
        id: 1,
        name: '王五',
        age: 18,
        sex: 0,
        $cellEdit: true
      }],
      option: {
        addBtn: false,
        addRowBtn: true,
        cellBtn: true,
        menuWidth: 250,
        column: [{
          label: '姓名',
          prop: 'name',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            }
          ]
        }, {
          label: '性别',
          prop: 'sex',
          type: 'select',
          dicData: [{
            label: '男',
            value: 0
          }, {
            label: '女',
            value: 1
          }],
          cell: true
        }, {
          label: '年龄',
          prop: 'age',
          dicData: [{
            label: '男',
            value: 0
          }, {
            label: '女',
            value: 1
          }],
          rules: [
            {
              required: true,
              message: '请输入年龄',
              trigger: 'blur'
            }
          ],
          cell: true
        }, {
          label: '开关',
          prop: 'switch',
          type: 'switch',
          cell: true
        }]
      }
    }
  },
  methods: {
    rowSave (form, done) {
      this.$message.success(
        '新增数据' + JSON.stringify(form)
      )
      done()
    },
    addUpdate (form, index, done, loading) {
      this.$message.success('模拟网络请求')
      setTimeout(() => {
        this.$message.success('关闭按钮等待')
        loading()
      }, 1000)
      setTimeout(() => {
        this.$message.success(
          '编辑数据' + JSON.stringify(form) + '数据序号' + index
        )
        done()
      }, 2000)
    },
    addRow () {
      this.$message.success('正在添加，请稍后')
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.$refs.crud.rowCellAdd({
            name: '',
          });
        }
      }, 500)
    },
    addNextRow (index) {
      this.data.splice(index + 1, 0, {
        $cellEdit: true
      })
    },
    addBreakRow (index) {
      this.data.splice(index, 0, {
        $cellEdit: true
      })
    },
    handleRowClick (row, event, column) {
      this.$message({
        showClose: true,
        message: '序号' + row.$index,
        type: 'success',
      });
    }
  }
}
</script>